<template>
  <div class="search-recommend">
    <div class="search-recommend-title">
      <img src="../../assets/images/zxjt/recommendTag.png" alt="">
      <div class="title">大家都在搜</div>
    </div>
    <div class="search-recommend-tag">
      <div class="recommend-tags">
        <div class="recommend-tag" v-for="(item, index) in tags" :key="index" @click="goTag(item.tagName)">
          {{ item.tagName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['tags'],
  data() {
    return {
      historylist: ['杰克股份', '股份', '杰克', '克股', '杰克股份', '杰克股份', '杰克股份', '杰克股份', '杰克股份', '杰克股份']
    }
  },
  methods: {
    //点击热门标签
    goTag(name) {
      this.$emit("clickTag", name)
      this.sensorsTrack(name)
    },
    //点击推荐标签打点
    sensorsTrack(functionName) {
      $sensorsTrack('financing_videoZoneSearchPageButtonClick', {
        module_name: '推荐标签',
        function_name: functionName
      });
    }
  }
}
</script>

<style scoped lang="less">
.search-recommend {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: auto;
  margin-top: 40px;

  .search-recommend-title {
    margin: 0 auto;
    width: 100%;
    height: 37px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      width: 30px;
      height: 30px;
      margin-left: 40px;
    }

    .title {
      color: #262E40;
      font-size: 26px;
      font-weight: 600;
    }
  }

  .search-recommend-tag {
    margin-left: 30px;
    margin-top: 26px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    // background-color: red;
    .recommend-tags {
      height: 100%;

      .recommend-tag {
        display: inline-block;
        height: 100%;
        width: auto;
        line-height: 41.6px;
        background-color: rgba(245, 246, 249, 1);
        border-radius: 50px;
        padding: 7px 19px;
        margin-right: 30px;
        margin-bottom: 10px;
        font-size: 28px;
        color: #757E93;
      }
    }
  }
}</style>